import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_app/components/toggleRotate.dart';
import 'dart:math';
import 'package:flutter_app/components/layout.dart';
import 'package:flutter_app/utils/AppUtil.dart';
import 'package:flutter_app/generated/l10n.dart';
class TradePage extends StatefulWidget {
  @override
  _TradePageState createState() => _TradePageState();
}

class ListItem {
  String name;

  ListItem({this.name});
}

List<ListItem> lists = [
  ListItem(
    name: "BTC",
  ),
  ListItem(
    name: 'USDT',
  ),
  ListItem(
    name: 'USDC',
  ),
  ListItem(
    name: 'ETH',
  ),
  ListItem(
    name: 'BCH',
  ),
  ListItem(
    name: 'LTC',
  ),
  ListItem(
    name: 'LINK',
  ),
];

List<Widget> getCoinItems(context) {
  return lists.map((item) {
    return Row(
      children: [
        Image.asset(
          "assets/images/ic_btc.png",
          width: 36,
          height: 36,
        ),
        SizedBox(
          width: 15,
        ),
        Expanded(
          child: Container(
            padding: const EdgeInsets.fromLTRB(0.0, 15.0, 15.0, 15.0),
            decoration: BoxDecoration(
                border: Border(
                    bottom: BorderSide(width: 1, color: Colors.grey[200]))),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      item.name,
                      style:
                          TextStyle(fontWeight: FontWeight.w400, fontSize: 16),
                    ),
                    SizedBox(height: 5),
                    //账户余额
                    Text(S.of(context).balance+'：0',
                        style: TextStyle(color: Colors.grey, fontSize: 13))
                  ],
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }).toList();
}
class _TradePageState extends State<TradePage> {
  bool loading = false;
  void initState() {
    //相当于mounted
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    void gotoPage(path) {
      Navigator.pushNamed(context, path);
    }

    //显示底部弹框的功能
    void showBottomSheet() {
      //兑换成exchange
      GetBottomSheet(context,children:getCoinItems(context),text:S.of(context).exchange);
    }
    void showCoins() {
      //支付
      GetBottomSheet(context,children:getCoinItems(context),text:S.of(context).pay);
    }

    return Scaffold(
        appBar: PreferredSize(
          //appbar高度
          preferredSize: Size.fromHeight(0.0),
          child: AppBar(
            brightness: Brightness.dark,
            backgroundColor: Color(0xFF3D6CFF),
            elevation: 0,
          ),
        ),
        body: RefreshIndicator(
          onRefresh: () async {},
          child: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                  decoration: BoxDecoration(color: Color(0xFF3D6CFF)),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 20),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        //交易 trade
                        Text(S.of(context).trade,
                            style:
                                TextStyle(fontSize: 22, color: Colors.white)),
                        TextButton(
                          onPressed: () => gotoPage('/trade/record'),
                          //记录record
                          child: Text(
                            S.of(context).record,
                            style: TextStyle(color: Colors.white),
                          ),
                        )
                      ],
                    ),
                  ),
                ),
                Container(
                    decoration: BoxDecoration(color: Color(0xFF3D6CFF)),
                    padding: const EdgeInsets.only(
                        top: 16.0, bottom: 16.0, left: 20.0, right: 20.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(vertical: 10.0),
                          //支付pay
                          child: Text(
                            S.of(context).pay,
                            style: TextStyle(color: Colors.white),
                          ),
                        ),
                        Container(
                          decoration: BoxDecoration(
                            color: Colors.black.withOpacity(0.2),
                            borderRadius: BorderRadius.circular(3),
                          ),
                          child: Padding(
                            padding: const EdgeInsets.symmetric(
                                vertical: 5.0, horizontal: 14.0),
                            child: Row(
                              children: [
                                Expanded(
                                  child: TextField(
                                      style: TextStyle(color: Colors.white),
                                      decoration: InputDecoration(
                                          hintText: '1-'+AppUtil.formatNum(2999999),
                                          hintStyle:
                                              TextStyle(color: Colors.white38),
                                          border: OutlineInputBorder(
                                              borderSide: BorderSide.none),
                                          contentPadding:
                                              const EdgeInsets.symmetric(
                                                  vertical: 0.0))),
                                ),
                                Text(
                                  'Max',
                                  style: TextStyle(color: Colors.white),
                                ),
                                SizedBox(
                                  width: 20.0,
                                ),
                                SizedBox(
                                  width: 1,
                                  height: 12,
                                  child: DecoratedBox(
                                    decoration:
                                        BoxDecoration(color: Colors.grey),
                                  ),
                                ),
                                SizedBox(
                                  width: 20.0,
                                ),
                                GestureDetector(
                                  onTap: () => showCoins(),
                                  child: Row(children: [
                                    Image.asset('assets/images/coins/ic_usdc.png',width: 25),
                                    SizedBox(
                                      width: 5,
                                    ),
                                    Text(
                                      'USDC',
                                      style: TextStyle(color: Colors.white),
                                    ),
                                    Icon(
                                      Icons.arrow_forward_ios,
                                      size: 14,
                                      color: Colors.white.withOpacity(0.26),
                                    ),
                                  ]),
                                )
                              ],
                            ),
                          ),
                        ),
//                    账户余额
                        Padding(
                          padding: const EdgeInsets.symmetric(vertical: 15.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              ///账户余额
                              Text(
                                S.of(context).balance+'：0 usdc',
                                style: TextStyle(color: Colors.white),
                              ),
                              TextButton(
                                onPressed: () => gotoPage('/trade/charge'),
                                ///deposit充币
                                child: Text(
                                  S.of(context).deposit,
                                  style: TextStyle(color: Colors.white),
                                ),
                              ),
                            ],
                          ),
                        )
                      ],
                    )),
                Stack(alignment: Alignment.center, children: [
                  Positioned(
                      left: 0,
                      right: 0,
                      top: 0,
                      child: Container(
                        height: 34,
                        decoration: BoxDecoration(
                          // color: Colors.black,
                          image: DecorationImage(
                              image: AssetImage(
                                  "assets/images/bg_exchange_down.png"),
                              alignment: Alignment.topCenter,
                              fit: BoxFit.fitWidth),
                        ),
                      )),
                  ToggleRotate(
                    rad: pi,
                    curve: Curves.decelerate,
                    durationMs: 400,
                    //动画时长
                    onTap: () {},
                    child: Container(
                      padding: EdgeInsets.all(5),
                      child: Center(
                        child: Image.asset(
                          "assets/images/ic_exchange.png",
                          width: 45,
                          height: 45,
                        ),
                      ),
                    ),
                  ),
                ]),
                Container(
                  padding: EdgeInsets.symmetric(horizontal: 20.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      SizedBox(
                        height: 20,
                      ),
                      ///兑换成
                      Text(S.of(context).exchange),
                      SizedBox(
                        height: 20,
                      ),
                      Container(
                        decoration: BoxDecoration(
                          color: Colors.grey.withOpacity(0.15),
                          borderRadius: BorderRadius.circular(3),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.symmetric(
                              vertical: 5.0, horizontal: 14.0),
                          child: Row(
                            children: [
                              Expanded(
                                child: TextField(
                                    decoration: InputDecoration(
                                        hintText: '0.0001-'+AppUtil.formatNum(69.9999,point: 4),
                                        hintStyle:
                                            TextStyle(color: Colors.grey),
                                        border: OutlineInputBorder(
                                            borderSide: BorderSide.none),
                                        contentPadding:
                                            const EdgeInsets.symmetric(
                                                vertical: 0.0)
                                    )
                                ),
                              ),
                              SizedBox(
                                width: 20.0,
                              ),
                              SizedBox(
                                width: 1,
                                height: 12,
                                child: DecoratedBox(
                                  decoration: BoxDecoration(color: Colors.grey),
                                ),
                              ),
                              SizedBox(
                                width: 20.0,
                              ),
                              GestureDetector(
                                onTap: () => showBottomSheet(),
                                child: Row(children: [
                                  Image.asset('assets/images/ic_btc.png',width: 25),
                                  SizedBox(
                                    width: 8,
                                  ),
                                  Text('BTC'),
                                  Icon(
                                    Icons.arrow_forward_ios,
                                    size: 14,
                                    color: Colors.black.withOpacity(0.26),
                                  ),
                                ]),
                              )
                            ],
                          ),
                        ),
                      ),
                      SizedBox(
                        height: 20,
                      ),
                      ///price 汇率
                      Text(S.of(context).price+'：---'),
                      SizedBox(
                        height: 20,
                      ),
                      FlatButton(
                          onPressed: () {},
                          textColor: Colors.white,
                          color: Colors.blueAccent[700],
                          highlightColor: Colors.blue[700],
                          colorBrightness: Brightness.dark,
                          padding: EdgeInsets.symmetric(vertical: 10.0),
                          child: Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            //确认
                            children: [
                              Text(S.of(context).confirm),
                            ],
                          ))
                    ],
                  ),
                )
              ],
            ),
          ),
        ));
  }
}
